﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>客户标签</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
</head>
<style type="text/css">
body {background-color: #fff;width: 100%;overflow-x: hidden;}
.search_title{color: #666;text-align: center;margin-top: 35px;}
.label{width: 80%;margin-top: 5px; padding: 5px 10px;font-size: 14px;margin-left: auto;margin-right: auto;text-align: center;}
.item_label1{background-color: #BCFEF0;color: #01A78C;padding: 0px 15px;width: 60%;display: inline-block;}
.item_label2{background-color: #DCF4FD;color: #4BADE5;padding: 0px 15px;width: 60%;display: inline-block;}
.item_label3{background-color: #FDF8EB;color: #FADCB3;padding: 0px 15px;width: 60%;display: inline-block;}
.look_label{width: 150px;height: 30px;margin-top: 30px; border: 1px solid #666;text-align: center;line-height: 30px;margin-left: auto;margin-right: auto;}
</style>

<body>
    <div class="container">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" onkeyup="onSearchInfo()" class="weui-search-bar__input" placeholder="搜索用户" required="">
                    <a href="javascript:" class="weui-icon-clear"></a>
                </div>
                <label class="weui-search-bar__label">
                    <i class="weui-icon-search"></i>
                    <span>搜索用户</span>
                </label>
            </form>
            <a href="javascript:CancelSearch();" class="weui-search-bar__cancel-btn" style="color:#5A7BAC;">取消</a>
        </div>
        <div class="weui-panel__bd" id="customlist" style="display: none">
        </div>
        <div class="label_tips">
            <div class="search_title f16">搜索指定标签</div>
            <div class="serchTag" style="margin-top: 30px;">
                <!--<div class="weui-flex">
                    <div class="weui-flex__item"><div class="placeholder label"><span class="item_label1" data="19">渠道同事</span></div></div>
                    <div class="weui-flex__item"><div class="placeholder label"><span class="item_label2" data="13">重要客户</span></div></div>
                    <div class="weui-flex__item"><div class="placeholder label"><span class="item_label3" data="5">90后</span></div></div>
                </div>-->
            </div>
            <div class="look_label" onclick="toUrl('clientTagManager.html')">查看全部标签</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../plugins/weui/js/weui.min.js"></script>
<script type="text/javascript">
    $(function(){
        weui.searchBar('#searchBar');
        //跳转标签页面
        $('.label').click(function () {
            var id=$(this).children().attr("data");
            toUrl("newLabel.html?Id=" + id);
        })
        load();
    })

    function onSearchInfo() {
        var search = $(".weui-search-bar__input").val()
        if (search!="") {
            ajaxGet(siteApiList.GetCllientBySearch + "?staffId=" + staffId + "&search=" + search, function (data) {
                if (!isJsonSuccess(data))
                    return;

                var list = data.Data;
                var html = "";
                for (var i = 0; i < list.length; i++) {
                    var item = list[i];
                    html += '<a href="customerDetail.html?clientid=' + item.ClientId + '&staffId=' + item.Staffid + '" class="weui-media-box weui-media-box_appmsg"><div class="weui-media-box__hd"><img class="weui-media-box__thumb" src="' + item.Avatar +
                        '" alt=""></div><div class="weui-media-box__bd"><h4 class="weui-media-box__title">'+item.NickName+'</h4><p class="weui-media-box__desc">'+item.CreateTime+' 成为客户</p></div></a>'
                }
                $("#customlist").html(html)
            })
        }
       $(".label_tips").hide();
       $("#customlist").show();
    }

    function load() {
        var html = "";
        ajaxGet(siteApiList.TagRelationList + '?staffid='+staffId, function (data) {
            console.log(data)
            if (!isJsonSuccess(data)) {
                return;
            } else {
                var html = "";
                $('.serchTag').append(function () {
                    var arr = [];
                    var indexs = 1;
                    $.each(data.Data, function (index, item) {
                        if (index % 3 == 0)
                            arr.push('<div class="weui-flex">');
                        arr.push('<div class="weui-flex__item"><div class="placeholder label"><span class="item_label' + indexs + '" data="19">' + item.Tag.TagName + '</span></div></div>');
                        if ((index + 1) % 3 == 0 & index != 0) {
                            arr.push('</div>');
                            indexs = 0;
                        }
                        indexs++;
                    });
                    return arr.join('');

                });
            }
        })
    }

    function CancelSearch() {
        $(".label_tips").show();
        $("#customlist").hide();
    }
</script>
</html>